<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8">
  	<title>Content Center</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/cover.css" rel="stylesheet">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    function login(){
    	location.href="main.html";
    }
    
    function loginFailed(){
    	$("#userNameDiv").addClass("has-success");
    	$("#userNameSpan").addClass("glyphicon-ok");
    	$("#passwordDiv").addClass("has-error");
    	$("#passwordSpan").addClass("glyphicon-remove");
    }
    
    function initModal(){
    	$("#userNameDiv").removeClass("has-success");
    	$("#userNameSpan").removeClass("glyphicon-ok");
    	$("#passwordDiv").removeClass("has-error");
    	$("#passwordSpan").removeClass("glyphicon-remove");
    }
    
    $(document).ready(function() {
    	$("#userNameDiv").css('text-align','left');
    	$("#userNameDiv").css('color','#000000');
    	$("#passwordDiv").css('text-align','left');
    	$("#passwordDiv").css('color','#000000');
    });
    </script>
  </head>
  <body>
    <div class="site-wrapper">
      <div class="site-wrapper-inner">
        <div class="cover-container">
          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">小车匠</h3>
              <ul class="nav masthead-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">客户链接</a></li>
                <li><a href="#">公司网址</a></li>
              </ul>
            </div>
          </div>
          <div class="inner cover">
            <h1 class="cover-heading">Content Center</h1>
            <p class="lead">今天出门没吃药，感觉自己萌萌哒。</p>
            <p class="lead">
				<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#loginModal" onclick="initModal()"> 登录</button>

				<div class="modal fade bs-example-modal-sm" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
				  <div class="modal-dialog modal-sm">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				        <h4 class="modal-title" id="myModalLabel"><font color="#000000">请输入您的用户名和密码</font></h4>
				      </div>
				      <div class="modal-body">
				      	<form action="">
				      	<div id="userNameDiv" class="form-group has-feedback">
						  <label class="control-label" for="userName">用户名：</label>
						  <input type="text" class="form-control" id="userName" placeholder="请输入用户名">
						  <span id="userNameSpan" class="glyphicon form-control-feedback"></span>
						</div>
						<div id="passwordDiv" class="form-group has-feedback">
						  <label class="control-label" for="password">密码：</label>
						  <input type="password" class="form-control" id="password" placeholder="请输入密码">
						  <span id="passwordSpan" class="glyphicon form-control-feedback"></span>
						</div>
				        </form>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				        <button type="button" class="btn btn-primary" onclick="login()">登录</button>
				        <button type="button" class="btn btn-primary" onclick="loginFailed()">登录失败</button>
				      </div>
				    </div>
				  </div>
				</div>
            </p>
            <!-- p class="lead"><a href="test.html" class="btn btn-lg btn-default">测试</a></p-->
          </div>
          <div class="mastfoot">
            <div class="inner">
              <p>by <a href="http://www.xiaochejiang.com">小车匠信息系统有限公司</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
